<template>
    <div class="cinemaCollect">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        我的收藏影院
      </div>
      <div class="refresh-wrapper" v-show="isRefresh">
        <refresh></refresh>
      </div>
      <loading v-show="isLoading"></loading>
      <div class="content" ref="content">
        <div class="content-container">
          <div class="empty" v-show="isRemove">
            <p class="text">您还没有收藏影院哦</p>
          </div>
          <div class="line-block-item" v-for="item in collectCinemaList" @click="$router.push({path:'/chooseSession',query:{id:item.id}})">
            <h1 class="name">{{item.name}}</h1>
            <p class="address">{{item.address}}</p>
            <div class="tags" v-show="item.cinemaFeatureList">
              <div class="tag" v-for="tag in item.cinemaFeatureList">{{tag.text}}</div>
            </div>
          </div>
          <endLine :text="'我是有底线的'" v-show="endFlag&&collectCinemaList"></endLine>
        </div>
      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import refresh from '../../../components/refresh/refresh'
  import back from '../../../components/back/back'
  import {getStorage} from "../../../common/js/localStorage";
  import endLine from '../../../components/endLine/endLine'
  import loading from '../../../components/loading/loading'
  import global from '../../../common/js/global'
  import {Toast} from 'mint-ui'
  let scroll = ''
    export default {
        name: "cinemaCollect",
        components:{
          'back':back,
          'refresh':refresh,
          'endLine':endLine,
          'loading':loading
        },
        data(){
          return{
            collectCinemaList:[],
            endFlag:false,
            offset:0,
            rows:10,
            isRefresh:false,
            isRemove:true,
            isLoading:false,
          }
        },
        mounted() {
          this._getCollectCinemaList()
          this.$nextTick(()=>{
          if(!this.scroll){
            // return
            scroll = new BScroll(this.$refs['content'],{
              click:true,
              pullUpLoad:{
                threshold:-50
              },
              pullDownRefresh: {
                threshold: 40,
                stop: 30
              }
            })
            //下拉回弹刷新停留事件600ms
            scroll.on('pullingDown', () => {
              this.isRefresh = true
              setTimeout(()=>{
                window.history.go(0)
                scroll.finishPullDown();
              },600)
            });
            let _this = this
            scroll.on('pullingUp',()=>{
              if(!_this.endFlag){
                _this.rows+=10;
                _this._getCollectCinemaList()
              }
              scroll.refresh()
              scroll.finishPullUp()

            })
          }else {
            this.scroll.refresh();
          }
        })
      },
        methods:{
          _getCollectCinemaList(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/member/myCinemaCollectList',
                data:{
                  offset:0,
                  rows:this.rows
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  this.isLoading = false
                  let data = res.data.data
                  this.collectCinemaList = data.myCinemaCollectList
                  this.endFlag = data.endFlag
                  if(!this.collectCinemaList){
                    this.isRemove = true
                  }else {
                    this.isRemove = false
                  }
                }else if(res.data.code===10){
                  this.$router.push('/login')
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.status)
              }

            })
          }
        },
        watch:{
          'collectCinemaList'(){

          }
        }
    }
</script>

<style scoped lang="stylus">
  .cinemaCollect
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 42px)
      overflow hidden
      .content-container
        padding 10px 0 0 0
        .empty
          position absolute
          top 80px
          left calc(50% - 80px)
          height 20px
          padding-top 160px
          width 160px
          background url('icon_cinema_empty@2x.png')no-repeat center top/124px 124px
          .text
            height 20px
            line-height 20px
            font-size 12px
            color #666666
        .line-block-item
          background #171718
          margin-bottom 10px
          text-align left
          padding 14px 10px 17px 10px
          .name
            height 22px
            line-height 22px
            color #ffffff
            font-size 16px
            font-weight 500
          .address
            height 17px
            line-height 17px
            font-size 12px
            color #ACB1BB
            padding-top 6px
          .tags
            height 15px
            margin-top 9px
            font-size 0
            .tag
              display inline-block
              vertical-align bottom
              border 1px solid #8B929E
              height 13px
              line-height 13px
              font-size 10px
              padding 1px 3px
              color #8B929E
              border-radius 2px
              margin-right 3px

</style>
